<template>
  <div class="mark-wrapper">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">持续交付KPI</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
        <v-choose :isReport="false" :isShowProj="false" dateType="year"></v-choose>        
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="report_addressee">月报收件人配置</el-col>
      </el-row>
      <div class="report">
      <div class="reportButton">
          <el-button @click="save_report" round type="primary" :disabled="error">确定</el-button>
      </div>
        <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <!--v-model="checkedCities"-->
              <!-- <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> -->
          <!-- </el-checkbox-group> --> 
      
      <div class="report-box">
        <el-transfer v-model="report_value" :data="report_data" :titles="titles"></el-transfer>
      </div>
      </div>
    </div>
  </div>
</template>
<script>
import VChoose from '@/views/data/dataChoose'
import { getHeader } from '@/app.config'
import { mapState } from 'vuex'
import http from '@/views/sys/axios'
import VSupervision from './supervision'

export default {
  components: {
    VChoose,
    VSupervision
  },
  data() {
    return {
      titles: ["待选收件人", "已选收件人"],
      report_data: [],
      report_value: [],
      error: false
    }
  },
  computed: {
    ...mapState({
        dataChoose: state => state.dataChoose
    })
  },
  created() {
    if(this.dataChoose.time.indexOf('-') < 0) {
      this.init()      
    } 
  },
  watch: {
    dataChoose: {
      handler: function() {
        if(this.dataChoose.time.indexOf('-') < 0) {
          this.init()         
        }
      },
      deep: true
    }
  },
  methods: {
    subduction(array, obj) {
      let arr = array.filter(v => !this.getCondition(v))
      
      let remaining = arr.filter(item => !item.add_item)
      
      let concatList = this.initPointData
      this.ruleForm.pointDatas = concatList.concat(remaining)
      
      if(obj.key) {
        this.ruleForm[obj.key].push({
          add_item: true,
          basic_flow: obj.basic_flow,
          indicator: obj.indicator,
          is_used: true,
          name: obj.name,
          key: obj.key,
          operator: obj.operator,
          type: obj.type,
          weight: 1
        })
      }
    },
    tableRowClassName({row, rowIndex}) {
      if(!row.add_item) {
        return 'disabled'
      }
    },
    tableRowClassName2({row, rowIndex}) {
      if(!row.is_used) {
        return 'disabled'
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection)
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val
      // console.log(this.multipleSelection2)
    },
    init() {
      if(this.dataChoose.selectId) {
        http.get(`/api/indicator/examine/entry/indicator?groupId=${this.dataChoose.selectId}&time=${this.dataChoose.time}&source_type=1&report_type=1`).then(res => {
          if(res.code == 200) {
            this.loading = false
            let a = []
            this.report_value = res.data.Selected
            // console.log(this.report_value) 
            if (res.data.ToBeSelect.length > 0){
              for(let i=0; i< res.data.ToBeSelect.length; i++) {
                if (res.data.ToBeSelect[i] in this.report_value){
                  continue
                }else{
                  a.push({
                    label: res.data.ToBeSelect[i],
                    key: res.data.ToBeSelect[i]
                  })
                }
              }
            }
            this.report_data = a;
            console.log(this.report_data)
          }
        })
      }     
    },
    reload() {
      this.init()
    },
    change(row, index, list) {
      row.status = true
      this.$set(list, index, row)
    },
    cancel(row, index, list) {
      row.status = false
      this.$set(list, index, row)
      this.reload()
    },
    save_report() {
      let data = {
        groupId: this.dataChoose.selectId,
        addressee: this.report_value,
        source_type: 2,
        report_type: 1
      }
      console.log(data)
      http.post(`/api/indicator/examine/report/addressee`, data)
      .then(res => {     
        if(res.code === 200) {
          this.success = true
          this.$message({
            showClose: true,
            message: '收件人配置成功!',
            type: 'success'
          })
          if(this.success) {
            this.reload()
          }
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          })
          this.reload()
        }        
      }).finally(() => {
        this.success = false
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  @import '../../assets/common/common.scss';
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  /deep/ .disabled{
    background: #F5F7FA;
  }
  .mark-wrapper{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
  .report {
    background: #fff;
    padding: 10px;
    margin: 10px 0;
  }
  .report-box{
    width: auto;
    font-size: 15px;
    margin-top: 10px;
  }
  /deep/ .el-transfer-panel{
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 400px;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;      
  }
  .report_addressee{
      color: #409EFF;
      font-size: 30px;
      margin-top: 40px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 0 20px;
      padding-top: 20px;
  }
  .marT{
      margin-top: 20px;
  }
  .totalButton{
    float: right;
    position: relative;
    top: -7px;
  }
  /deep/ .reportButton .el-button--medium.is-round{
    float: right;
    position: relative;
    top: -7px;
    right: 30px;
    padding: 8px 30px;
  }
  /deep/ .totalButton .el-button--mini.is-round{
    padding: 7px 23px;
  }
  .flexBox{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .flexItem{
      flex: 1;
      margin: auto;
      &:first-child{
        margin-right: 5px;
      }      
    }
    .flexSpan{
      flex: 0 0 20px;
    }
  }
</style>